<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alipay Payment</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>支付宝支付页面</h1>

<!-- 用户ID和商品ID -->
<input type="hidden" id="userId" value="131123611256432131">
<input type="hidden" id="commodityId" value="172442145558078274">

<!-- 支付按钮 -->
<button class="payButton">支付宝支付</button>

</body>
</html>
<script>
    document.querySelector('.payButton').addEventListener('click',function() {
        // 获取用户ID和商品ID
        var userId = $('#userId').val();
        var commodityId = $('#commodityId').val();

        // 发送Ajax请求到后端创建订单
        $.ajax({
            url: '/alipay/createOrder',
            type: 'POST',
            data: {
                userId: userId,
                commodityId: commodityId
            },
            success: function(response) {
                // 后端返回的结果是支付宝支付页面的URL，跳转到该页面
                $('body').append('<div id="alipay-container">' + response + '</div>');
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    });
</script>
